<template>
  <div class="contract-list">
    <div class="header">
      <el-button type="primary" @click="handleNewContract">新建合同</el-button>
      <div class="count">已选 {{ selectedCount }} 项</div>
      <el-input
        v-model="searchQuery"
        placeholder="请输入内容搜索"
        class="search-input"
      >
        <template #suffix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <el-table
      :data="paginatedContracts"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="合同名称"  width="235" />
      <el-table-column prop="status" label="合同状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="no" label="合同编号" />
      <el-table-column prop="contractType" label="合同类型">
        <template #default="{ row }">
          {{ getContractTypeText(row.contractType) }}
        </template>
      </el-table-column>
      <el-table-column prop="paymentType" label="合同收支类型">
        <template #default="{ row }">
          <div class="payment-type">
            <el-icon :class="row.paymentType === 1 ? 'income' : 'expense'">
              <ArrowUp v-if="row.paymentType === 1" />
              <ArrowDown v-if="row.paymentType === 0" />
            </el-icon>
            {{ getPaymentTypeText(row.paymentType) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="合同金额" />
      <el-table-column prop="adminName" label="管理员" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column label="操作" width="150" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleViewDetail">详情</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :prev-text="'上一页'"
        :next-text="'下一页'"
        :total-text="'总条数'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()

const searchQuery = ref('')
const selectedCount = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(40) // Total number of contracts

const contracts = ref([
  {
    "index": 1,
    "status": 4,
    "no": "BH0038",
    "name": "沧州市办公用品采购项目",
    "paymentType": 1,
    "contractType": 2,
    "updateTime": "2020-05-30 14:05:44",
    "amount": "170,000,000",
    "adminName": "顾娟"
  },
  {
    "index": 2,
    "status": 2,
    "no": "BH0081",
    "name": "红河哈尼族彝族自治州办公用品采购项目",
    "paymentType": 0,
    "contractType": 0,
    "updateTime": "2020-05-30 22:59:10",
    "amount": "267,000,000",
    "adminName": "薛强"
  },
  {
    "index": 3,
    "status": 1,
    "no": "BH0022",
    "name": "铜川市办公用品采购项目",
    "paymentType": 1,
    "contractType": 1,
    "updateTime": "2020-05-30 06:29:24",
    "amount": "380,000,000",
    "adminName": "陈平"
  },
  {
    "index": 4,
    "status": 0,
    "no": "BH0082",
    "name": "陇南市办公用品采购项目",
    "paymentType": 1,
    "contractType": 2,
    "updateTime": "2020-05-30 08:03:42",
    "amount": "303,000,000",
    "adminName": "金刚"
  },
  {
    "index": 5,
    "status": 4,
    "no": "BH0099",
    "name": "新余市办公用品采购项目",
    "paymentType": 0,
    "contractType": 0,
    "updateTime": "2020-05-30 05:10:49",
    "amount": "450,000,000",
    "adminName": "常刚"
  },
  {
    "index": 6,
    "status": 3,
    "no": "BH0092",
    "name": "渭南市办公用品采购项目",
    "paymentType": 0,
    "contractType": 2,
    "updateTime": "2020-05-30 19:10:24",
    "amount": "323,000,000",
    "adminName": "江霞"
  },
  {
    "index": 7,
    "status": 2,
    "no": "BH0024",
    "name": "六安市办公用品采购项目",
    "paymentType": 1,
    "contractType": 0,
    "updateTime": "2020-05-30 06:45:18",
    "amount": "125,000,000",
    "adminName": "叶平"
  },
  {
    "index": 8,
    "status": 1,
    "no": "BH0097",
    "name": "莆田市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 20:00:38",
    "amount": "302,000,000",
    "adminName": "郑洋"
  },
  {
    "index": 9,
    "status": 2,
    "no": "BH0076",
    "name": "白城市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 13:04:04",
    "amount": "100,000,000",
    "adminName": "卢军"
  },
  {
    "index": 10,
    "status": 0,
    "no": "BH0011",
    "name": "重庆市办公用品采购项目",
    "paymentType": 1,
    "contractType": 1,
    "updateTime": "2020-05-30 21:12:41",
    "amount": "139,000,000",
    "adminName": "杨涛"
  },
  {
    "index": 11,
    "status": 4,
    "no": "BH0029",
    "name": "丹东市办公用品采购项目",
    "paymentType": 1,
    "contractType": 0,
    "updateTime": "2020-05-30 12:16:47",
    "amount": "108,000,000",
    "adminName": "康静"
  },
  {
    "index": 12,
    "status": 3,
    "no": "BH0071",
    "name": "沧州市办公用品采购项目",
    "paymentType": 0,
    "contractType": 2,
    "updateTime": "2020-05-30 20:57:44",
    "amount": "349,000,000",
    "adminName": "宋超"
  },
  {
    "index": 13,
    "status": 3,
    "no": "BH0025",
    "name": "来宾市办公用品采购项目",
    "paymentType": 0,
    "contractType": 2,
    "updateTime": "2020-05-30 13:29:38",
    "amount": "452,000,000",
    "adminName": "唐秀英"
  },
  {
    "index": 14,
    "status": 2,
    "no": "BH0015",
    "name": "景德镇市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 02:30:52",
    "amount": "218,000,000",
    "adminName": "白军"
  },
  {
    "index": 15,
    "status": 0,
    "no": "BH0044",
    "name": "昌都地区办公用品采购项目",
    "paymentType": 0,
    "contractType": 2,
    "updateTime": "2020-05-30 00:10:48",
    "amount": "244,000,000",
    "adminName": "尹勇"
  },
  {
    "index": 16,
    "status": 1,
    "no": "BH0031",
    "name": "晋中市办公用品采购项目",
    "paymentType": 0,
    "contractType": 0,
    "updateTime": "2020-05-30 14:41:46",
    "amount": "320,000,000",
    "adminName": "潘平"
  },
  {
    "index": 17,
    "status": 3,
    "no": "BH0095",
    "name": "邵阳市办公用品采购项目",
    "paymentType": 1,
    "contractType": 2,
    "updateTime": "2020-05-30 19:55:48",
    "amount": "264,000,000",
    "adminName": "常杰"
  },
  {
    "index": 18,
    "status": 3,
    "no": "BH0059",
    "name": "宜昌市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 06:34:53",
    "amount": "82,000,000",
    "adminName": "白秀英"
  },
  {
    "index": 19,
    "status": 2,
    "no": "BH0042",
    "name": "丽江市办公用品采购项目",
    "paymentType": 1,
    "contractType": 2,
    "updateTime": "2020-05-30 11:31:56",
    "amount": "370,000,000",
    "adminName": "黎明"
  },
  {
    "index": 20,
    "status": 3,
    "no": "BH0067",
    "name": "日喀则地区办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 02:24:37",
    "amount": "349,000,000",
    "adminName": "石秀英"
  },
  {
    "index": 21,
    "status": 1,
    "no": "BH0037",
    "name": "鄂州市办公用品采购项目",
    "paymentType": 1,
    "contractType": 1,
    "updateTime": "2020-05-30 06:43:41",
    "amount": "365,000,000",
    "adminName": "金杰"
  },
  {
    "index": 22,
    "status": 2,
    "no": "BH0033",
    "name": "廊坊市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 22:56:53",
    "amount": "320,000,000",
    "adminName": "康超"
  },
  {
    "index": 23,
    "status": 1,
    "no": "BH0081",
    "name": "新界办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 11:27:32",
    "amount": "269,000,000",
    "adminName": "吴艳"
  },
  {
    "index": 24,
    "status": 0,
    "no": "BH0085",
    "name": "怀化市办公用品采购项目",
    "paymentType": 0,
    "contractType": 2,
    "updateTime": "2020-05-30 16:20:03",
    "amount": "313,000,000",
    "adminName": "曾霞"
  },
  {
    "index": 25,
    "status": 1,
    "no": "BH0032",
    "name": "天津市办公用品采购项目",
    "paymentType": 1,
    "contractType": 0,
    "updateTime": "2020-05-30 19:28:18",
    "amount": "303,000,000",
    "adminName": "龙艳"
  },
  {
    "index": 26,
    "status": 2,
    "no": "BH0075",
    "name": "新界办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 18:53:58",
    "amount": "279,000,000",
    "adminName": "方芳"
  },
  {
    "index": 27,
    "status": 1,
    "no": "BH0068",
    "name": "大庆市办公用品采购项目",
    "paymentType": 0,
    "contractType": 2,
    "updateTime": "2020-05-30 12:19:31",
    "amount": "313,000,000",
    "adminName": "彭磊"
  },
  {
    "index": 28,
    "status": 1,
    "no": "BH0099",
    "name": "上海市办公用品采购项目",
    "paymentType": 1,
    "contractType": 2,
    "updateTime": "2020-05-30 14:20:49",
    "amount": "265,000,000",
    "adminName": "于勇"
  },
  {
    "index": 29,
    "status": 3,
    "no": "BH0098",
    "name": "南平市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 19:35:51",
    "amount": "103,000,000",
    "adminName": "易强"
  },
  {
    "index": 30,
    "status": 4,
    "no": "BH0099",
    "name": "九龙办公用品采购项目",
    "paymentType": 1,
    "contractType": 2,
    "updateTime": "2020-05-30 01:56:12",
    "amount": "88,000,000",
    "adminName": "李刚"
  },
  {
    "index": 31,
    "status": 1,
    "no": "BH002",
    "name": "忻州市办公用品采购项目",
    "paymentType": 0,
    "contractType": 2,
    "updateTime": "2020-05-30 08:55:26",
    "amount": "377,000,000",
    "adminName": "常丽"
  },
  {
    "index": 32,
    "status": 3,
    "no": "BH0013",
    "name": "日喀则地区办公用品采购项目",
    "paymentType": 1,
    "contractType": 1,
    "updateTime": "2020-05-30 21:56:51",
    "amount": "213,000,000",
    "adminName": "田敏"
  },
  {
    "index": 33,
    "status": 1,
    "no": "BH0050",
    "name": "玉树藏族自治州办公用品采购项目",
    "paymentType": 1,
    "contractType": 1,
    "updateTime": "2020-05-30 03:34:24",
    "amount": "51,000,000",
    "adminName": "段杰"
  },
  {
    "index": 34,
    "status": 2,
    "no": "BH0027",
    "name": "长治市办公用品采购项目",
    "paymentType": 1,
    "contractType": 2,
    "updateTime": "2020-05-30 17:46:27",
    "amount": "296,000,000",
    "adminName": "雷秀英"
  },
  {
    "index": 35,
    "status": 2,
    "no": "BH0065",
    "name": "金昌市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 16:13:37",
    "amount": "413,000,000",
    "adminName": "罗艳"
  },
  {
    "index": 36,
    "status": 1,
    "no": "BH0094",
    "name": "伊春市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 04:16:29",
    "amount": "282,000,000",
    "adminName": "何艳"
  },
  {
    "index": 37,
    "status": 4,
    "no": "BH0015",
    "name": "运城市办公用品采购项目",
    "paymentType": 1,
    "contractType": 1,
    "updateTime": "2020-05-30 23:28:07",
    "amount": "108,000,000",
    "adminName": "韩涛"
  },
  {
    "index": 38,
    "status": 3,
    "no": "BH0050",
    "name": "澳门半岛办公用品采购项目",
    "paymentType": 1,
    "contractType": 0,
    "updateTime": "2020-05-30 00:09:03",
    "amount": "417,000,000",
    "adminName": "魏艳"
  },
  {
    "index": 39,
    "status": 0,
    "no": "BH0081",
    "name": "清远市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 00:04:21",
    "amount": "500,000,000",
    "adminName": "秦娟"
  },
  {
    "index": 40,
    "status": 4,
    "no": "BH0017",
    "name": "赤峰市办公用品采购项目",
    "paymentType": 0,
    "contractType": 1,
    "updateTime": "2020-05-30 03:45:30",
    "amount": "302,000,000",
    "adminName": "吕霞"
  }
])

const paginatedContracts = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return contracts.value.slice(start, end)
})

const getStatusType = (status) => {
  const statusMap = {
    0: 'info',    // 待审核
    1: 'warning', // 待履行
    2: 'success', // 已完成
    3: 'danger',  // 审核失败
    4: 'info'     // 其他状态
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '待履行',
    2: '已完成',
    3: '审核失败',
    4: '其他'
  }
  return statusMap[status] || '未知'
}

const getPaymentTypeText = (type) => {
  return type === 1 ? '收款' : '付款'
}

const getContractTypeText = (type) => {
  const typeMap = {
    0: '待审核',
    1: '待履行',
    2: '已完成'
  }
  return typeMap[type] || '未知'
}

const formatAmount = (amount) => {
  return new Intl.NumberFormat('zh-CN').format(amount)
}

const handleSelectionChange = (selection) => {
  selectedCount.value = selection.length
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

const handleNewContract = () => {
  router.push('/contracts/table')
}

const handleViewDetail = () => {
  router.push('/contracts/detail')
}

const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确认要删除合同"${row.name}"吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 这里应该调用后端 API 删除数据
      const index = contracts.value.findIndex(item => item.no === row.no)
      if (index > -1) {
        contracts.value.splice(index, 1)
        total.value--
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      }
    })
    .catch(() => {
      // 取消删除
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}
</script>

<style scoped>
.contract-list {
  padding: 24px;
  background-color: #fff;
  border-radius: 4px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.count {
  margin-right: auto;
  color: #666;
}

.search-input {
  width: 300px;
}

.payment-type {
  display: flex;
  align-items: center;
  gap: 4px;
}

.payment-type .income {
  color: #67c23a;
}

.payment-type .expense {
  color: #f56c6c;
}

:deep(.el-table) {
  margin-top: 16px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 